<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'tjfxManager.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
     <script type="text/javascript" src="${ctx}/resources/js/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="${ctx}/resources/echart/echarts.common.min.js"></script>
  </head>
  
  <div id="container" style="height: 100%"></div>
  
  <body>
  <script type="text/javascript">
  var myChart = echarts.init(document.getElementById('container'));
  $.post("${ctx}/tjfx/customersAddressPie.action",function(obj){
	  
    var option = {
    title : {
        text: '客户地址分布比例饼图',
        subtext: '纯属虚构',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: obj
    },
    series : [
        {
            name: '访问来源',
            type: 'pie',
            radius : '55%',
            center: ['50%', '60%'],
            data:obj,
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  });
  
  
       </script>
  </body>
</html>
